<template>
    <el-container class="main-wrap">
        <el-header>
            欢迎：{{username}}
            <el-button @click="quit">退出</el-button>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                :default-active="$route.path"
                :default-openeds="[$route.name]"
                class="el-menu-vertical-demo"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <el-submenu :index="item.name" v-for="item in asideMenus" :key="item.name">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item.title}}{{item.name}}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item :index="menu.path" v-for="menu in item.children" :key="menu.path">
                            <router-link :to="menu.path" tag="span">{{menu.title}}</router-link>
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import {decrypt} from '@/utils/crypto';
import {mapState,mapActions} from 'vuex';
export default {
    data(){
        return {
           username:''
        }
    },
    async created(){
        //获取用户信息
        await this.getUserInfo();
        let userinfo = JSON.parse(decrypt(localStorage.getItem('userinfo')));
        this.username = userinfo.username;
        console.log(this.$route.name);
    },
    computed:{
        ...mapState('user',['asideMenus'])
    },
    methods:{
        ...mapActions('user',['getUserInfo']),
        quit(){
            //本地存储
            localStorage.clear();
            this.$router.push('/login');
        }
    }
}
</script>
<style lang="scss" scoped>
// div /deep/ .el-button--success{
//     border:1px solid red;
//     background-color:blue;
// }
.main-wrap{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
</style>